<template>
	<!-- 聊天界面输入框部分 -->
	<view class="footer2">
		
		<view class="footer-center">
			<input class="input-text" type="text" v-model="inputValue"></input>
		</view>
		<view class="footer-right" @tap="sendMessge">
			<view id='msg-type' >发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "chat-input",
		data() {
			return {
				inputValue: ''
			}
		},
		methods: {
			
			sendMessge: function () {
				var that = this;
				if (that.inputValue.trim() == '') {

					that.inputValue = '';
				} else {
					

					//点击发送按钮时，通知父组件用户输入的内容
					this.$emit('send-message', {
						type: 'text',
						content: that.inputValue
					});
					that.inputValue = '';
				}
			}
		}
	}
</script>

<style>


	.footer2 {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	   height: 100rpx;
		border-top: solid 1px #bbb;
	
		background-color: #fafafa;
	}
	
	.footer-right {
		width: 30%;
		height: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #1482D1;
	}
	#msg-type{
		font-size: 10rpx;
	}
	.footer-center {
		flex: 1;
		width: 60%;
		height: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 5rpx;
	}
	.footer-center .input-text {
		flex: 1;
		background: #fff;
		
		border: solid 1px #ddd;
		padding: 10px !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 15px;
	}
</style>
